<script lang="ts" setup>
import type { VxeGridListeners, VxeGridProps } from "vxe-table";

import {
  addzixun,
  deletezixun,
  echozixun,
  topzixun,
  updatezixun,
  zidian,
  zixunList,dictionaryList
} from "@fl/api/flagship/flagship";
import FlUpload from "@fl/components/fl-upload.vue";
import { Editor } from "@fl/origin-components/Editor/index";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();
interface dialogParamsType{
  msgContent?: string,
  msgCover?: string,
  msgTitle?: string,
  msgType?: string,
  shopId?: string,
}
interface stateType{
  msgStatus?: string,
  msgTitle?: string,
  msgType?: string,
  shopId?: string,
}
const dialogParams = ref<dialogParamsType>({
  msgContent: "",
  msgCover: "",
  msgTitle: "",
  msgType: "",
  shopId: "",
});
const state = ref<stateType>({
  msgStatus: "",
  msgTitle: "",
  msgType: "",
  shopId: "",
});
const dialogVisible = ref<boolean>(false);
const msgStatusList = ref<any>([]);
const msgTypeList = ref<any>([]);
const popType = ref<string>("1");

const rules = {
  msgContent: [{ message: "资讯内容不能为空", required: true, trigger: "blur" }],
  msgCover: [{ message: "图片不能为空", required: true, trigger: "change" }],
  msgTitle: [{ message: "资讯标题不能为空", required: true, trigger: "blur" }],
  msgType: [{ message: "资讯类型不能为空", required: true, trigger: "change" }],
};

const zxAddRef = ref<any>();


const gridOptions = reactive<VxeGridProps>({
  border: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: "序号", type: "seq", width: "60" },
    { field: "msgCover", slots: { default: "msgCover" }, title: "图片", width: 130 },
    { field: "msgTypeValue", title: "类型" },
    { field: "msgTitle", title: "内容标题" },
    { field: "viewCount", title: "浏览量" },
    // { field: 'nickName', title: '创建人' },
    { field: "createTime", title: "创建时间" },
    { field: "msgStatusValue", title: "发布状态" },
    { slots: { default: "operate" }, title: "操作", width: 220 },
  ],
  data: [
    { nickName: "22", realName: "11" },
    { nickName: "33", realName: "33" },
  ],
  editConfig: {
    mode: "row",
    showStatus: true,
    trigger: "manual",
  },
  height: 530,
  keepSource: true,
  loading: false,
  pagerConfig: {
    currentPage: 1,
    enabled: true,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 200, 500],
    total: 100,
  },
  showOverflow: true,
});
// 分页器操作
const gridEvents: VxeGridListeners = {
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
    }

    getTableList();
  },
};

// 查询重置
function searchchange(key) {
  if (!key) {
    // 重置
    state.value.msgStatus = "";
    state.value.msgType = "";
    state.value.msgTitle = "";
  }
  getTableList();
}
function getTableList() {
  gridOptions.loading = true;
  const options = {
    ...state.value,
    pageNum: gridOptions.pagerConfig.currentPage,
    pageSize: gridOptions.pagerConfig.pageSize,
  };
  zixunList(options).then((res) => {
    gridOptions.loading = false;
    gridOptions.data = res.data.records;
    gridOptions.pagerConfig.total = res.data.total;
    if (msgTypeList.value && msgTypeList.value.length > 0) {
      msgTypeList.value.forEach((item) => {
        gridOptions.data &&
          gridOptions.data.forEach((element) => {
            if (element.msgType === item.dictValue) {
              element.msgTypeValue = item.dictLabel;
            }
          });
      });
    }
    if (msgStatusList.value && msgStatusList.value.length > 0) {
      msgStatusList.value.forEach((item) => {
        gridOptions.data &&
          gridOptions.data.forEach((element) => {
            if (element.msgStatus === item.dictValue) {
              element.msgStatusValue = item.dictLabel;
            }
          });
      });
    }
  });
}
// 字典项
function dictionary() {
  zidian("shop_zxlx").then((res) => {
    msgTypeList.value = res.data;
  });
  dictionaryList("shop_zxzt",0).then((res) => {
    msgStatusList.value = res.data;
  });
}
dictionary();
onMounted(() => {
  msgTypeList.value.forEach((item) => {
    gridOptions.data.forEach((element) => {
      if (element.msgType === item.dictValue) {
        element.msgTypeValue = item.dictLabel;
      }
    });
  });

  if (route.query.id) {
    state.value.shopId = route.query.id;
  } else {
    state.value.shopId = "";
  }
  getTableList();
});
// 添加企业资讯弹出框
function addEnterpriseClick() {
  popType.value = "1";
  dialogParams.value.msgContent = "";
  dialogParams.value.msgType = "";
  dialogParams.value.msgCover = "";
  dialogParams.value.msgTitle = "";
  dialogVisible.value = true;
}
// 确认添加企业资讯、编辑
function addSubmit() {
  if (zxAddRef.value) {
    zxAddRef.value.validate((valid) => {
      if (valid) {
        if (route.query.id) {
          dialogParams.value.shopId = route.query.id;
          if (popType.value === "1") {
            // 新增
            dialogParams.value.id = "";
            addzixun(dialogParams.value).then((res) => {
              ElMessage.success(res.msg);
              dialogVisible.value = false;
              getTableList();
            });
          } else {
            // 编辑
            updatezixun(dialogParams.value).then((res) => {
              ElMessage.success(res.msg);
              dialogVisible.value = false;
              getTableList();
            });
          }
        }
      } else {
        ElMessage.error("请先将必要信息填写完整！");
      }
    });
  }
}
// 删除
function deleteList(row) {
  ElMessageBox.confirm("是否确定删除?", "注意", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deletezixun([row.id]).then(() => {
      ElMessage.success("操作成功");
      getTableList();
    });
  });
}
// 编辑
function editClick(row) {
  popType.value = "2";
  echozixun(row.id).then((res) => {
    dialogVisible.value = true;
    dialogParams.value.msgContent = res.data.msgContent;
    dialogParams.value.msgType = res.data.msgType;
    dialogParams.value.msgCover = res.data.msgCover;
    dialogParams.value.msgTitle = res.data.msgTitle;
    dialogParams.value.id = row.id;
  });
}
// 发布
function releaseClick(row) {
  echozixun(row.id).then((res) => {
    const obj = {
      id: row.id,
      msgContent: res.data.msgContent,
      msgCover: res.data.msgCover,
      msgStatus: "03",
      msgTitle: res.data.msgTitle,
      msgType: res.data.msgType,
      shopId: route.query.id,
    };
    updatezixun(obj).then(() => {
      ElMessage.success("操作成功");
      getTableList();
    });
  });
}
// 置顶
function topClick(row) {
  topzixun(row.id).then(() => {
    ElMessage.success("操作成功");
    getTableList();
  });
}
</script>

<template>
  <div class="p-10 bg-white flex">
    <div class="pr-24 flex-1">
      <!-- <PlusForm v-model="state"
                      :columns="columns"
                      :row-props="{ gutter: 20 }"
                      label-width=""
                      :has-footer="false"
            /> -->
      <el-form :model="state" label-width="60px" class="demo-ruleForm" status-icon inline>
        <el-form-item label="标题：">
          <el-input v-model="state.msgTitle" style="width: 200px" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="类型：">
          <el-select
            v-model="state.msgType"
            style="width: 200px"
            placeholder="请选择"
            size="middle"
          >
            <el-option
              v-for="dict in msgTypeList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态：">
          <el-select
            v-model="state.msgStatus"
            style="width: 200px"
            placeholder="请选择"
            size="middle"
          >
            <el-option
              v-for="dict in msgStatusList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <ElButton type="primary" @click="searchchange(1)"> 搜索 </ElButton>

      <ElButton @click="searchchange(0)"> 重置 </ElButton>
    </div>
  </div>

  <ElButton class="p-10 mb-10" @click="addEnterpriseClick()"> 添加企业资讯 </ElButton>

  <vxe-grid v-bind="gridOptions" v-on="gridEvents">
    <template #msgCover="{ row }">
      <el-image
        style="width: 120px; height: 100px"
        :src="row.msgCover"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="4"
        :preview-src-list="[row.msgCover]"
        fit="cover"
      />
    </template>

    <template #operate="{ row }">
      <el-text class="mx-1" type="primary" @click="releaseClick(row)"> 发布 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="editClick(row)"> 编辑 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="deleteList(row)"> 删除 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="topClick(row)"> 置顶 </el-text>
    </template>
  </vxe-grid>

  <el-dialog
    v-model="dialogVisible"
    :title="popType === '1' ? '添加企业资讯' : '编辑企业资讯'"
    width="60vw"
  >
    <div class="formDiv">
      <el-form
        ref="zxAddRef"
        :rules="rules"
        :model="dialogParams"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型：" prop="msgType">
              <el-select
                v-model="dialogParams.msgType"
                style="width: 600px"
                placeholder="请选择"
                size="middle"
              >
                <el-option
                  v-for="dict in msgTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="标题：" prop="msgTitle">
              <el-input
                v-model="dialogParams.msgTitle"
                style="width: 600px"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="封面图：" prop="msgCover">
              <FlUpload v-model="dialogParams.msgCover" />
            </el-form-item>
            <!-- <el-form-item label="封面图：" prop="msgCover">
                            <FlUpload v-model="dialogParams.msgCover" />
                        </el-form-item> -->
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="内容：" prop="msgContent">
              <!-- <editor :type="'url'" @update="onEditorUpdate" v-model="dialogParams.msgContent" :min-height="192" /> -->
              <Editor :is-jc-mall="false"
                v-model="dialogParams.msgContent"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <template #footer>
      <div class="form-btn">
        <el-button plain @click="dialogVisible = false"> 关闭 </el-button>

        <el-button type="primary" @click="addSubmit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.mx-1 {
  cursor: pointer;
}
.formDiv {
  height: 60vh;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
